<template>
	<view class="zmt-audio-box clearfix">
		<!--图片部分开始-->
		<view class="zmt-audio-image relative">
			<view class="zmt-audio-play-box absolute" @click="setPlay('start')" v-if="innerAudioContextStatus==false">
				<image src="./static/images/bofang.png"></image>
			</view>
			<view class="zmt-audio-play-box absolute" @click="setPlay('pause')" v-if="innerAudioContextStatus==true">
				<image src="./static/images/zanting.png"></image>
			</view>
			<image v-if="audio && audio.poster" :src="audio.poster" mode="aspectFill" class="zmt-audio-images"></image>
			<image v-else src="./static/images/yinpin.png" mode="aspectFill" class="zmt-audio-images"></image>
		</view>
		<!--图片部分结束-->
		<!--内容部分开始-->
		<view class="zmt-content">
			<!--标题开始--> 
			<view class="zmt-title left ellipsis">
					{{audio.title||'你曾是我炫耀的资本'}}
			</view>
			<!--标题结束-->
			<!--作者和进度条开始-->
			<view class="zmt-authors left clearfix">
				<!--作者开始-->
				<view class="zmt-author left">
					{{duration}} / {{currentTime}}
				</view>
				<!--作者结束-->
				<!--进度条开始-->
				<view class="zmt-progress left">
						<progress stroke-width="5" border-radius="5" activeColor="#42b983" :percent = "currentProgress"/>
				</view>
				<!--进度条结束-->
			</view>
			<!--作者和进度条结束-->
			<!--下载按钮-->
			<view class="zmt-download right" @click="remove()">
				<image src="./static/images/shanchu.png"></image>
			</view>
		</view>
		<!--内容部分结束-->
	</view>
</template>
<style scoped>
	.zmt-audio-play-box image{width:15px;height:15px;margin-top:13px;margin-left:2px;}
	.zmt-audio-play-box{width:40px;height:40px;background:rgba(0, 0, 0, 0.2);z-index:30;text-align: center;line-height:40px;border-radius: 50%;margin-left:calc((100% - 40px)/2);margin-top:calc((100% - 40px)/2);}
	/*相对定位*/
	.relative{position:relative;}
	/*绝对定位*/
	.absolute{position:absolute;}
	/*固定定位*/
	.fixed{position:fixed;}
	.zmt-progress-right image{width:1.3rem;height:1.3rem;margin-left:10%;}
	.zmt-progress-right{width:4.5rem;height:1.5rem;margin-top:-.7rem;}
	.zmt-progress-left{width:calc(100% - 5rem);height:1.5rem;}
	.zmt-download image{width:50%;height:50%;} 
	.zmt-download{width:2.5rem;height:2.5rem;text-align: right;margin-right:.5rem;margin-top:-3px;cursor:pointer;}
	.zmt-authors{width:calc(100% - 4rem);}
	.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	.left{float:left;}
	.right{float:right;}
	.zmt-author{width:100%;line-height:1.2rem;color:#999;font-size:.8rem;}
	.zmt-progress{margin-top:.5rem;width:100%;}
	.zmt-title{width:70%;line-height:1.5rem;color:#666;font-weight:500;font-size:.9rem;float:left;}
	.zmt-content{width:calc(100% - 5.5rem);float:left;height:80%;margin-left:.5rem;margin-top:10px;}
	.zmt-audio-images{width:100%;height:100%;}
	.zmt-audio-image{height:60px;aspect-ratio: 1 / 1;margin-left:.5rem;border-radius: 5px;overflow: auto;float:left;top:10px;}
	.zmt-audio-box{width: 100%;height: 80px;background-color: #fff;border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 4px 1px;}
	/*清楚浮动*/
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
</style>

<script>
	import File from "./static/js/file.js"
	export default {
		data() {
			return {
				innerAudioContext:null,
				innerAudioContextStatus:false,
				duration:null,//总时长
				currentTime:'00:00',//当前播放时间
				currentProgress:0,//当前进度条播放进度
			}
		},
		props:['audio'],
		mounted() {
			//初始化状态并获取音频总时长
			this.initInnerAudioContext();
		},
		onHide() {
			//进入后台暂停播放
			if(this.innerAudioContext){
				this.pauseAudio(this.innerAudioContext);
			}
		},
		watch:{ //监听数据变化
			audio: {
			    handler(item) {
					var that = this;
				  this.destroyInnerAudioContext();
				  setTimeout(function(){
					  that.initInnerAudioContext(item);
					  that.setPlay('start');
				  },300);
				  
			    },
			    // 开启深度监听
			    deep: true
			  }
			
		},
		methods:{
			//删除音频
			remove(){
				this.$emit('removeAudio',true);
			},
			//播放/暂停
			setPlay(status){
				var that = this;
				if(status == 'start' && !that.innerAudioContext){
					this.initInnerAudioContext();//再次检测音频是否被初始化
					that.playAudio(that.innerAudioContext);
				}else if(status == 'start' && that.innerAudioContext){
					that.playAudio(that.innerAudioContext);
				}else if(status == 'pause' && that.innerAudioContext){
					that.pauseAudio(that.innerAudioContext);
				}
				
				//如果播放结束，则终止播放，更改播放按钮状态
				that.innerAudioContext.onEnded(()=>{
					that.$emit('onEnded',true);
					that.destroyInnerAudioContext();
				});
				that.innerAudioContext.onTimeUpdate(()=> {
					var currentTime = Math.ceil(that.innerAudioContext.currentTime);
					if(currentTime > 0){
						that.$emit('onTimeUpdate',that.innerAudioContext.currentTime);
						that.currentTime = this.convertSecondsToMinutesAndSeconds(currentTime);
						
						//计算出当前进度条播放进度
						that.currentProgress = Math.ceil((currentTime/Math.ceil(this.innerAudioContext.duration)) * 100);
					}
					
				});
			},
			//开始播放
			playAudio(innerAudioContext){
				var that = this;
				innerAudioContext.play();
				innerAudioContext.onPlay(() => {
				  that.$emit('onPlay',true);
				  that.innerAudioContextStatus = true;
				});
			},
			//暂停播放
			pauseAudio(innerAudioContext){
				var that = this;
				innerAudioContext.pause();
				innerAudioContext.onPause(() => {
				  that.$emit('onPause',true);
				  that.innerAudioContextStatus = false;
				});
			},
			//销毁播放事件
			destroyInnerAudioContext(){
				this.innerAudioContext.stop();
				this.innerAudioContextStatus = false;
				//销毁播放事件
				this.innerAudioContext.destroy();
				this.innerAudioContext = null;
			},
			//初始化状态并获取总播放时长
			initInnerAudioContext(audio = null){
				if(!this.innerAudioContext){
					if(audio == null){
						audio = this.audio;
					}
					this.innerAudioContext = uni.createInnerAudioContext(); 
					this.innerAudioContext.src = audio.url?audio.url:'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/audio/你曾是我炫耀的资本.mp3';//音频地址
					this.innerAudioContext.loop = audio.loop?audio.loop:false;//循环播放
				}
				this.innerAudioContext.onCanplay(()=>{
					this.duration = this.convertSecondsToMinutesAndSeconds(parseInt(this.innerAudioContext.duration));
				});
			},
			//将秒数转化为分钟：秒
			convertSecondsToMinutesAndSeconds(seconds) {
			    var minutes = Math.floor(seconds / 60);
				if(minutes < 10){
					minutes = '0' + minutes;
				}
			    var remainingSeconds = seconds % 60;
				if(remainingSeconds < 10){ 
					remainingSeconds = '0' + remainingSeconds;
				}
				return minutes+':'+remainingSeconds;
			},
			//下载音频
			setDownLoad(url){
				var that = this;
				const fileDir = '/chaojiai/' //创建的文件夹名
				const root = File.root() //系统根目录
				const filePath = root + fileDir
				File.mkdirs(filePath); //创建文件夹
				//用时间戳作为文件名
				var fileName = 'chaoji'+new Date().getTime()+'.mp3';
				File.Download(url,fileName);
			}
		}
	}
</script>

